<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片滤镜</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="mesage">
      <h3>拖动进度条，给图片添加滤镜</h3>
    </div>
    <div class="tool-bar">
      <div class="tool-item">
        <label for="blur">模糊：</label>
        <input
          type="range"
          class="tool"
          id="blur"
          name="blur"
          min="0"
          max="100"
          value="0"
        />
      </div>
      <div class="tool-item">
        <label for="brightness">亮度：</label>
        <input
          type="range"
          class="tool"
          id="brightnessr"
          name="brightness"
          min="0"
          max="100"
          value="100"
        />
      </div>
      <div class="tool-item">
        <label for="contrast">对比度：</label>
        <input
          type="range"
          class="tool"
          id="contrastr"
          name="contrast"
          min="0"
          max="100"
          value="100"
        />
      </div>
      <div class="tool-item">
        <label for="invert">曝光：</label>
        <input
          type="range"
          class="tool"
          id="invertr"
          name="invert"
          min="0"
          max="100"
          value="0"
        />
      </div>
      <div class="tool-item">
        <label for="grayscale">灰度：</label>
        <input
          type="range"
          class="tool"
          id="grayscaler"
          name="grayscale"
          min="0"
          max="100"
          value="0"
        />
      </div>
      <div class="tool-item">
        <label for="padding">间距：</label>
        <input
          type="range"
          name="padding"
          id="padding"
          class="tool"
          value="10"
        />
      </div>
      <div class="tool-item">
        <label for="color">底色：</label>
        <input type="color" name="color" id="color" class="tool" />
      </div>
    </div>
    <div class="pic-box">
      <div class="pic">
        <img
          src="https://source.unsplash.com/7bwQXzbF6KE/800x500"
          alt="图片"
          id="showImg"
        />
      </div>
    </div>
    <div class="pic-tool">
      或许你想上传自己的图片？
      <input type="file" onchange="selectPic(this)" />
    </div>
    <script>
      //获取dom
      const toolList = document.querySelectorAll(".tool");
      const pic = document.querySelector(".pic");
      const img = document.getElementById("showImg");
      const filterList = [
        {
          name: "blur",
          size: "px",
          value: 0,
        },
        {
          name: "brightness",
          size: "%",
          value: 100,
        },
        {
          name: "contrast",
          size: "%",
          value: 100,
        },
        {
          name: "invert",
          size: "%",
          value: 0,
        },
        {
          name: "grayscale",
          size: "%",
          value: 0,
        },
      ];
      toolList.forEach((item) => {
        item.addEventListener("change", handleChange);
      });
      toolList.forEach((item) => {
        item.addEventListener("mousemove", handleChange);
      });
      function getStr() {
        let str = "";
        filterList.forEach((item) => {
          str += `${item.name}(${item.value}${item.size}) `;
        });
        return str;
      }
      function handleChange(e) {
        const target = e.target;
        const type = target.name;
        /* const size = type === "blur" || "padding" ? "px" : "%"; */
        const value = target.value;
        if (type === "color") {
          //改变图片的底色
          pic.style.backgroundColor = value;
        } else if (type === "padding") {
          pic.style.padding = `${value}px`;
        } else {
          //更新list里的值
          filterList[
            filterList.findIndex((i) => {
              return i.name === type;
            })
          ].value = value;
          img.style.filter = getStr();
        }
      }
      function selectPic(file) {
        console.log("file", file.files);
        const reader = new FileReader();
        reader.onload = (evt) => {
          console.log(evt);
          img.src = evt.currentTarget.result;
        };
        reader.readAsDataURL(file.files[0]);
      }
    </script>
  </body>
</html>
